<!-- Vue3.3新特性 defineOptions defineSlots defineProps defineEmits -->
<template>
    <div>
        {{ props.name }}
    </div>
    <button @click="send">派发</button>

    <div>
        <ul>
            <li v-for="item in data">
                <slot :item="item"></slot>
            </li>
        </ul>
    </div>
</template>

<!-- generic使接收类型可变 -->
<script generic="T" setup lang='ts'>
//普通的方式
/* import type { PropType } from 'vue'
const props = defineProps({
    name: {
        type: Array as PropType<string[]>,
        required: true
    }
}) */
// vue3.3泛型支持 T
const props = defineProps<{
    name: string[],
    data: T[]
}>();
props.name;
//事件派发 ts写法
/* const emit1 = defineEmits<{
    (event: string, name: string): void
}>() */
//事件派发 vue3.3改进
const emit2 = defineEmits<{
    'send1': [name: string]
}>();

const send = () => {
    // emit1('send', 'hello')
    emit2('send1', 'hello')
};
//Vue3.3 内置了defineoptions不需要再去下载插件了
//它里面的属性跟optionsAPI一模一样的
//常用的属性定义name
defineOptions({
    name: 'Vue333',
    inheritAttrs: false
})

defineSlots<{
    default(props: {item: T}): void
}>()

</script>

<style scoped lang="scss"></style>
